<template>
<div class="list" ref="list">
  <div class="list-wrap" ref="listWrap">
    <slot></slot>
    <div class="row fs30" v-show='loading'>
    加载中....</div>
  </div>
  <div class="row fs30" v-if='done'>
    已加载全部数据！
  </div>
</div>
</template>
<script>

export default {
  name: 'infiniteScroll',
  components: {

  },
  props:{
    limit:{
      default:300,
      type:Number
    },
    loading:{
      default:false,
      type:Boolean
    },
    done:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      // this_loading:this.loading
    }
  },
  // watch:{
  //   this_loading(newVal){
  //     this.this_loading = newVal
  //   }
  // },
  methods: {
    listNearBottom() {
      let _el_list = this.$refs.listWrap,
        _el_wrap = this.$refs.list
      return _el_list.scrollHeight - _el_wrap.scrollTop - _el_wrap.offsetHeight < this.limit
    }
  },
  mounted() {
    let that =this
    this.$nextTick(function(){

    that.$refs.list.addEventListener('scroll', window._.debounce(ev => {
      if (that.listNearBottom()) {
        // 调用时监听此事件
        that.$emit('loadNow')
      }
    },300))
    })
  }
} 
</script>

<style lang='scss'>

</style>